<template>
    <div class="uploadMain">
        <div v-if="fileType== 'FILE'" style='display: flex;':style="{'justifyContent':align}">
            <el-upload class="upload-demo" :data="data" drag :headers="headers" :accept="accept"
            :before-upload="before"
            ref="upload"
                :action="`${$apiHost}` + actionUrl" :on-success="onSuccess" multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em style="color: #303e9d;">点击上传</em></div>
            </el-upload>
        </div>
        <div style="display: flex;" class="main" v-else>
            <div>
                <div style="margin-bottom:20px">
                    凭证上传
                </div>
                <el-upload class="upload-demo" drag :headers="headers" :action="`${$apiHost}/common/upload`"
                    :on-success="onSuccess" multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将图片拖到此处，或<em style="color: #303e9d;">点击上传</em></div>
                </el-upload>
            </div>
            <div style="margin-left: 20px;">
                <div style="margin-bottom:20px">凭证预览</div>
                <div style="display: grid;grid-template-columns: repeat(5,1fr);grid-gap:10px;">
                    <div v-for="(v, i) in list" :key="i">
                        <el-image fit="fit" :key="i" :src="v" style="width: 100%;border-radius: 10px;"></el-image>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
export default {
    props: {
        data:{
            type:Object,
            default:(()=>{})
        },
       fileType:{
        type:String,
        default:''
       },
       accept:{
        type:String,
        default:''
       },
       align:{
        type:String,
        default:''
       },
       warehouseId:{
        type:[Number,String],
        default:''
       }
    },
    computed: {
        headers() {
            return {
                token: this.tokenv3 || window.$quinn.getStorage("tokenv3"),
                warehouseId:this.warehouseId
            };
        },
    },
    mounted(){
        if(this.fileType == 'FILE'){
            this.actionUrl = '/sale/saleExport'
        }
    },
    data() {
        return {
            list: [],
            actionUrl:'/common/upload'
        }
    },
    methods: {
        before(e){
            if(!this.warehouseId){
                this.$message.error('请选择出货仓库!');
                this.$refs.upload.abort();
                return false
            }else{
                return true
            }
            
        },
        onSuccess(e) {
            if (this.fileType == 'FILE') {
                
                this.$emit('materialListDetail',e.data)
            } else {
                this.list.push(this.$imgHost + e.data);
                this.$emit('imageList', e.data)
            }


        }
    }

}
</script>
<style lang="less" scoped>
.main /deep/ .el-upload-list {
    display: none;
}

.main {
    margin: 20px 0;
}
.uploadMain /deep/ .el-upload-dragger:hover{
    border-color:#303e9d;
}
</style>